<template>
  <div class="box" v-show="eShow">
    <Row>
      <Col span="12" class="boxMain">
        <h2>性别年龄分析</h2>
        <Row>
          <Col span="2">单位：人</Col>
          <Col span="2" style="margin-left: 14%;color: #486FB0">55%</Col>
          <Col span="3" style="color: #486FB0">123.45人</Col>
          <Col span="2">
            <div class="btnN" style="background: linear-gradient(to left, #5776A5, #486FB0);">男性</div>
          </Col>
          <Col span="2">
            <div class="btnN">女性</div>
          </Col>
          <Col span="2" style="color: #FF515A">45%</Col>
          <Col span="3" style="color: #FF515A">123.45人</Col>
        </Row>
        <div class="eMain">
          <div id="staffAcceptance" :style="{ width: width + 'px', height: height + 'px'}"></div>
          <div id="staffAcceptanceR" :style="{ width: width + 'px', height: height + 'px'}"></div>
        </div>
      </Col>
      <Col span="12" class="boxMain">
        <h2>对象类型分析</h2>
        <Row style="margin-top: 40px">
          <Col span="8" class="ybCol">
            <i-circle :percent="21.3" dashboard v-if="eShow">
                <p>残疾人</p>
                <span class="demo-circle-inner" style="font-size:24px">21.3%</span>
            </i-circle>
            <p>残疾人数 1251人</p>
          </Col>
          <Col span="8" class="ybCol">
            <i-circle :percent="80" dashboard v-if="eShow">
                <p>重症患者</p>
                <span class="demo-circle-inner" style="font-size:24px">80%</span>
            </i-circle>
          </Col>
          <Col span="8" class="ybCol">
            <i-circle :percent="80" dashboard v-if="eShow">
                <p>重症患者</p>
                <span class="demo-circle-inner" style="font-size:24px">80%</span>
            </i-circle>
          </Col>
        </Row>
        <Row>
          <Col span="8" class="ybCol">
            <i-circle :percent="80" dashboard v-if="eShow">
                <p>重症患者</p>
                <span class="demo-circle-inner" style="font-size:24px">80%</span>
            </i-circle>

          </Col>
          <Col span="8" class="ybCol">
            <i-circle :percent="80" dashboard v-if="eShow">
                <p>重症患者</p>
                <span class="demo-circle-inner" style="font-size:24px">80%</span>
            </i-circle>
          </Col>
          <Col span="8" class="ybCol">
            <i-circle :percent="80" dashboard v-if="eShow">
                <p>重症患者</p>
                <span class="demo-circle-inner" style="font-size:24px">80%</span>
            </i-circle>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      split1: 0.5,
      eShow: true
    }
  },
  mounted () {
    this.ecN()
    this.ecR()
  },
  props: {
    width: {
      type: String,
      default: () => {
        return '380'
      }
    },
    height: {
      type: Number,
      default: () => {
        return 580
      }
    }
  },
  methods: {
    ecN () {
      var chartDom = document.getElementById('staffAcceptance')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'value',
          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          inverse: true // 倒叙
        },
        yAxis: {
          type: 'category',
          data: ['18岁以下', '18-29', '30-39', '40-49', '50-59', '60-69', '70及以上'],
          // show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          axisTick: {
            show: false// 不显示坐标轴刻度线
          },
          axisLine: {
            show: false// 不显示坐标轴线
          },
          axisLabel: {
            show: true, // 显示坐标轴上的文字
            color: '#555555', // 文字颜色
            fontSize: 12,
            padding: 0
          }
        },
        grid: {
          top: 10,
          left: 60,
          right: 5 // 边距
        },
        color: [
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#5776A5' },
              { offset: 1, color: '#486FB0' }
            ]
          }
        ],
        series: [
          {
            data: [80, 70, 50, 69, 19, 87, 45],
            type: 'bar',
            // 实现数字展示在柱状图
            label: {
              show: true,
              position: 'left'
            },
            barMaxWidth: '100',
            barWidth: 20 // 柱宽
          }
        ]
      }

      option && myChart.setOption(option)
    },
    ecR () {
      var chartDom = document.getElementById('staffAcceptanceR')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        grid: {
          top: 10,
          left: 5
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#FF515A' },
              { offset: 1, color: '#FFDD53' }
            ]
          }
        ],
        series: [
          {
            data: [80, 70, 50, 69, 19, 87, 45],
            type: 'bar',
            label: {
              show: true,
              position: 'right'
            },
            barWidth: 20
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
 .box{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
  }
  .box h2 {
    margin-bottom: 24px;
  }
  .box .btnN{
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(to left, #FF515A, #FFDD53);
    color: #fff;
  }
  .eMain {
    display: flex;
  }
  .box .boxMain {
    width: 94%;
    height: 100%;
    background: #fff;
  }
  .ybCol {
    height: 290px;
    text-align: center;
  }
  .ybCol p {
    margin-bottom: 8px;
  }
</style>
